<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet" />
    <style>
        /**/
        .text {
            font-size: 15px;
        }

        .item {
            margin-bottom: 5px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
        #main{
            width: 80%;
            margin: auto;
            margin-top: 10px;
        }
        #dataTable{
            margin-top: 10px;
        }
        #form{
            line-height: 60px;
        }
        #top{
            /*height: 100px;*/
            /*overflow: hidden;*/
        }
        div{
            /*border: 1px red solid;*/
        }
    </style>
</head>

<body>
<div id="top">
    <el-card class="box-card" style="background-color: #EBEEF5">
        <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
        <span style="font-size: 15px;margin-left: 10px">电核项配置</span>
        <el-button style="float: right; padding: 3px 0;margin-right: 10%" type="text">刷新</el-button>
    </el-card>
</div>
<div id="main" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
    <div id="app">
        <el-row type="flex" justify="center">
            <el-col :span="12">
                <el-card shadow="always"
                         align="center"
                         style="font-size: 15px;background-color: #66b1ff;color: white">
                    申请资料种类
                </el-card>
                <el-menu
                        default-active="0"
                        class="el-menu-vertical-demo"
                        align="center">
                    <el-menu-item v-for="(item,i) in category"
                                  :key="i"
                                  id="i"
                                  @click=show(item)
                                  style="border-bottom: 1px #b3d8ff dashed">
                        {{item}}
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="12">
                <el-card shadow="always"
                         align="center"
                         style="font-size: 15px;background-color: #66b1ff;color: white">
                    操作区
                </el-card>
                <el-row type="flex" justify="center">
                    <el-col :span="24">
                        <div id="dataTable">
                            <el-card class="box-card"  style="min-height: 700px">
                                <div slot="header" class="clearfix">
                                    <span style="font-size: 15px">审核项</span>
                                    <el-tag>审核对象：{{currentCategory}}</el-tag>
                                    <el-button style="float: right" type="primary" size="medium" plain @click="addDialogFormVisible = true">新增</el-button>
                                    <div id="medel_box">
                                        <el-dialog title="新增电核项" :visible.sync="addDialogFormVisible">
                                            <el-form :model="form">
                                                <el-form-item label="审核项名称" :label-width="formLabelWidth">
                                                    <el-input v-model="form.name" autocomplete="off"></el-input>
                                                </el-form-item>
                                                <el-form-item label="审核类型" :label-width="formLabelWidth">
                                                    <el-select v-model="form.type" placeholder="请选择分类">
                                                        <el-option label="判断" value="判断"></el-option>
                                                        <el-option label="数值" value="数值"></el-option>
                                                        <el-option label="文本" value="文本"></el-option>
                                                        <el-option label="单选" value="单选"></el-option>
                                                        <el-option label="多选" value="多选"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-form>
                                            <div slot="footer" class="dialog-footer">
                                                <el-button @click="addDialogFormVisible = false">取 消</el-button>
                                                <el-button type="primary"  @click="pc_save">确 定</el-button>
                                            </div>
                                        </el-dialog>
                                    </div>
                                </div>
                                <template>
                                    <!--  给表格绑定数据，tableData即为后端传过来的数据  -->
                                    <el-table
                                            :data="tableData"
                                            border
                                            style="width: 100%">
                                        <!--  用porp给这一列绑定 tableData中对应的属性 ，type=selection表示这一列是复选框 -->
                                        <!--  label="编号"表示这一列的表头是“编号”,width代表这一列宽度 -->
                                        <el-table-column
                                                prop="name"
                                                label="字段名称">
                                        </el-table-column>
                                        <el-table-column
                                                prop="type"
                                                label="审核类型"
                                                width="80px">
                                        </el-table-column>
                                        <el-table-column
                                                label="状态"
                                                width="80px">
                                            <template scope="scope">
                                                <el-switch
                                                        on-text ="是"
                                                        off-text = "否"
                                                        on-color="#5B7BFA"
                                                        off-color="#dadde5"
                                                        v-model="scope.row.status"
                                                        @change=change(scope.row)>
                                                </el-switch>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                label="操作"
                                                width="80px">
                                            <template scope="scope">
                                                <el-popconfirm
                                                        title="确认删除本条信息？"
                                                        @confirm=pc_del(scope.row)>
                                                    <el-button slot="reference" style="float: left; padding: 3px 0;margin-left: 10px" type="text">删除</el-button>
                                                </el-popconfirm>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </template>
                                <template>
                                    <div class="block">
                                        <!-- size-change绑定的是每页显示数量变化时执行的方法，
                                         current-change绑定的是翻页时执行的方法，
                                         page-sizes属性中的数组是 “每页显示多少条” 下拉框中的数据，
                                         page-size属性时当前显示条数，
                                         layout是翻页控件的布局顺序，
                                         total绑定的是总共多少条数据-->
                                        <el-pagination
                                                @size-change="handleSizeChange"
                                                @current-change="handleCurrentChange"
                                                :current-page="currentPage"
                                                :page-sizes="[10, 20, 30, 40]"
                                                :page-size="pageSize"
                                                layout="total, sizes, prev, pager, next, jumper"
                                                :total="total">
                                        </el-pagination>
                                    </div>
                                </template>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</div>

<script th:inline="javascript">
    let app = new Vue({
        el:'#main',
        data:{
            category:[],
            tableData:[],
            pageSize:10,
            currentCategory:'申请人',
            total:0,//总条数
            //当前页
            currentPage:1,
            form:{
                checkObj:'',
                name:'',
                type:"判断",
            },
            addDialogFormVisible:false,
            formLabelWidth:"120"
        },
        methods:{
            //向后端发起请求，加载表格内容，传的参数是当前查第几页
            getData(val,ca){
                axios.get([[@{phonecheck/page}]],{
                    params:{
                        //每页多少条
                        limit:this.pageSize,
                        //从什么地方开始查
                        offSet:0,
                        //当前查第几页
                        pageNum:val,
                        //排序字段和排序方式
                        sort:"id",
                        sortOrder:"desc",
                        //要传属性的继续写在下面
                        checkObj:ca
                    }
                }).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                    this.total = res.data.total;
                    this.tableData = res.data.rows;
                    for(let i = 0 ;i<this.tableData.length;i++){
                        if(this.tableData[i].status === 1){
                            this.tableData[i].status = true;
                        }
                        else{
                            this.tableData[i].status = fasle;
                        }
                    }
                }).catch(error => {
                    console.log(error);
                })
            },
            getCategory(val){
                axios.get([[@{phonecheck/category}]],{

                }).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                    console.log(res.data.data);
                    this.category = res.data.data;
                    console.log(this.category)
                }).catch(error => {
                    console.log(error);
                })
            },
            //改变每页显示数据条数时执行的方法
            handleSizeChange(val){
                this.pageSize=val;
                this.currentPage=1;
                this.getData(this.currentPage,this.currentCategory);
            },
            //翻页时执行的方法
            handleCurrentChange(val) {
                this.currentPage=val;
                this.getData(this.currentPage,this.currentCategory);
            },
            show(val){
                this.currentCategory = val;
                this.getData(1,this.currentCategory);
            },
            pc_del(row){
                axios.delete([[@{phonecheck/}]]+row.id,{

                }).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                    this.getData(this.currentPage,this.currentCategory);
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }).catch(error => {
                    console.log(error);
                })
            },
            change:function(row){
                let now_status = row.status?1:0;
                axios.put([[@{phonecheck/status/}]]+row.id+"/"+now_status,{

                }).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                }).catch(error => {
                    console.log(error);
                })
                console.log(row.id,row.status);
            },
            pc_save(){
                this.addDialogFormVisible=false;
                this.form.checkObj = this.currentCategory;
                if(this.form.name!=''){
                    axios({
                        method:'post',
                        url:[[@{phonecheck/more}]],
                        data: this.form
                    }).then((res) => {
                        this.getData(this.currentPage,this.currentCategory);
                        this.form.name='';
                        this.form.type='';
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    }).catch((e)=>{
                        console.log(error);
                    })
                }else{
                    this.$message.error('添加失败');
                }
            }
        },
    //创建时执行查询，查第一页
    created : function () {
        this.getCategory();
        this.getData(1,this.currentCategory);
    }
    });
    let app3 = new Vue({
        el:"#top"
    });
</script>
</body>
</html>